<template>
  <div>
    <div class="left-detail">
        <div class="title-text">楼栋详情</div>
        <div class="info-item"><strong>实住户数</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ houseList ? houseList.length : 0 }}户</div>
        <div class="info-item"><strong>实住人口</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ peopleCount }}人</div>
        <div class="info-item"><strong>是否有特殊人员</strong></div>
        <table class="legend">
            <tr>
                <td>
                    <div class="focus-house"></div>
                </td>
                <td>特殊人群居住房屋；</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>共计{{ focusCount }}人；</td>
            </tr>
        </table>
        <div class="info-item"><strong>出租房</strong></div>
        <table class="legend">
            <tr>
                <td>
                    <div class="rent-house"></div>
                </td>
                <td>已出租房；</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>共计{{ rentCount }}间；</td>
            </tr>
        </table>
        <table class="table-detail">
            <tr>
                <td><strong>单元数</strong></td>
                <td>{{ buildingInfo ? buildingInfo.unitAmount : 0}}个单元；</td>
            </tr>
            <tr>
                <td><strong>楼栋长</strong></td>
                <td>{{ buildingInfo ? buildingInfo.buildingLeaderName : '' }}；</td>
            </tr>
            <tr>
                <td><strong>楼栋长电话</strong></td>
                <td>{{ buildingInfo ? buildingInfo.mobile : '' }}；</td>
            </tr>
            <tr>
                <td><strong>楼栋详址</strong></td>
                <td>{{ buildingInfo ? buildingInfo.addrDetail : '' }}；</td>
            </tr>
        </table>
        <div class="right-legend" style="margin-top:20px;">
            <div class="legend-text">当前户</div>
            <div class="legend-div" style="background-color: #ff7a19;">{{ currentRoom }}</div>
        </div>
        <div class="right-legend">
            <div class="legend-text">未采集数据</div>
            <div class="legend-div" style="background-color: rgb(210,210,210);"></div>
        </div>
    </div>
    <div class="right-building">
        <!--<div class="units">-->
        <!--<div class="floors">-->
        <!--<div class="rooms"></div>-->
        <!--</div>-->
        <!--<div class="unit-name-container">-->
        <!--<div class="unit-name"></div>-->
        <!--</div>-->
        <!--</div>-->
    </div>

    <!-- 房屋详情 -->
    <el-dialog
      title="房屋详情"
      ref="houseDetailDialog"
      append-to-body
      :visible.sync="houseDetailFlowBox"
      :fullscreen="false"
      custom-class="detail_dialog"
    >
      <house-detail style="height:850px;overflow-y:auto;" :houseId="houseId" :key="houseId" />
    </el-dialog>
  </div>
</template>

<script>
import $ from "@/assets/jquery-vendor.js";
import "@/assets/css/gis/buildingDetail.css";

import houseDetail from '@/components/gis/houseDetail'

import {buildingDetail,getHouseByBuildingRent,getFocusPeopleCountByBuilding} from "@/api/xapply/doubleReal/peopleGis"

export default {
  name: 'buildDetail',
  props:['buildingId','buildingUnit','houseNumber'],
  data() {
    return {
      buildingId:this.buildingId,
      buildingUnit:this.buildingUnit,
      houseNumber:this.houseNumber,
      buildingInfo: [],
      houseByBuildingRent: [],
      focusPeopleCountByBuilding: [],
      rentCount: 0,
      focusCount: 0,
      currentRoom: "",
      houseDetailFlowBox:false,
      houseId:'',
      houseList:[],
      peopleCount:0
    };
  },

  components:{
    houseDetail
  },

  created(){
    this.init();

    console.log("props:",this.buildingId,this.houseNumber);

    let _this = this
    window.showRoomDetail = _this.showRoomDetail
  },

  methods: {
    //加载数据
    init(){
      console.log("buildingUnit",this.buildingUnit)
      console.log("houseNumber",this.houseNumber)
      buildingDetail(this.buildingId,this.buildingUnit,this.houseNumber).then(res=>{
        console.log("build_res:",res)
        this.buildingInfo = res.data.buildingInfo.buildingInfo ? res.data.buildingInfo.buildingInfo : []
        this.houseList = res.data.buildingInfo.houseList
        this.peopleCount = res.data.peopleCount

        //加载
        getHouseByBuildingRent(this.buildingId).then(res=>{
          this.houseByBuildingRent = res.data

          //加载
          getFocusPeopleCountByBuilding(this.buildingId).then(result=>{
            this.focusPeopleCountByBuilding = result.data

            this.initBuilding();
          })
        })
      }).catch(error=>{
        console.log(error)
      })
    },

    //
    initBuilding(){
      if(this.buildingInfo){
        let unitAndHousesPerFloor = this.buildingInfo.unitAndHousesPerFloor;
        let unitArr = unitAndHousesPerFloor.split(';');

        console.log("unitArr:",unitArr)

        let exitHouseList = this.houseList;
        let houseByBuildingRentList = this.houseByBuildingRent;
        let focusPeopleCountByBuilding = this.focusPeopleCountByBuilding;

        if(focusPeopleCountByBuilding){
          this.rentCount = houseByBuildingRentList.length;
          for(let p=0;p<focusPeopleCountByBuilding.length;p++){
              this.focusCount += focusPeopleCountByBuilding[p].count;
          }
        }

        let buildingDivStr = "<div class='whole-building'><div class='top-building'><img src='/img/buildingTop.jpg' style='width:562px;height:65px;' /></div><div class='bottom-building'>";

        if(this.buildingUnit && this.houseNumber){
            for (let i = 0; i < unitArr.length; i++) {
                let floorArr = unitArr[i].split(',');
                let unit = parseInt(floorArr[0]);
                let floors = parseInt(floorArr[1]);
                let rooms = parseInt(floorArr[2]);

                buildingDivStr += "<div class='units'>";
                buildingDivStr += "<div class='unit-name-container'><div class='unit-name'>" + unit + "单元" + "</div></div>";
                for (let j = 1; j <= floors; j++) {
                    buildingDivStr += "<div class='floors'>";
                    for (let z = 1; z <= rooms; z++) {
                        let roomNum = j + "0" + z;
                        let classStr = "rooms";
                        let clickStr = "";

                        for (let n = 0; n < exitHouseList.length; n++) {
                            if (unit === exitHouseList[n].buildingunit*1 && roomNum === exitHouseList[n].house_number) {
                                classStr += " exit-room";
                                clickStr = " onclick='showRoomDetail(\"" + exitHouseList[n].id + "\",\"" + roomNum + "\")'";
                                break;
                            }
                        }
                        for (let m = 0; m < houseByBuildingRentList.length; m++) {
                            if (unit === houseByBuildingRentList[m].buildingunit*1 && roomNum === houseByBuildingRentList[m].house_number) {
                                classStr += " rent-room";
                                if (!clickStr)
                                    clickStr = " onclick='showRoomDetail(\"" + exitHouseList[m].id + "\",\"" + roomNum + "\")'";
                                break;
                            }
                        }
                        for (let q = 0; q < focusPeopleCountByBuilding.length; q++) {
                            if (unit === focusPeopleCountByBuilding[q].buildingunit*1 && roomNum === focusPeopleCountByBuilding[q].house_number) {
                                classStr += " focus-room";
                                if (!clickStr)
                                    clickStr = " onclick='showRoomDetail(\"" + exitHouseList[q].id + "\",\"" + roomNum + "\")'";
                                break;
                            }
                        }
                        if(this.buildingUnit*1 === unit*1 && this.houseNumber === roomNum){
                            classStr += " current-room";
                        }

                        classStr = classStr.replace("rent-room focus-room current-room","rent-focus-current");
                        classStr = classStr.replace("rent-room current-room","rent-current");
                        classStr = classStr.replace("focus-room current-room","focus-current");

                        buildingDivStr += "<div class='" + classStr + "' " + clickStr + ">";
                        buildingDivStr += roomNum;
                        buildingDivStr += "</div>";
                    }
                    buildingDivStr += "</div>";
                }
                buildingDivStr += "</div>";
            }
        }else{
            for (let i = 0; i < unitArr.length; i++) {
                let floorArr = unitArr[i].split(',');
                let unit = parseInt(floorArr[0]);
                let floors = parseInt(floorArr[1]);
                let rooms = parseInt(floorArr[2]);
                buildingDivStr += "<div class='units'>";

                buildingDivStr += "<div class='unit-name-container'><div class='unit-name'>" + unit + "单元" + "</div></div>";
                for (let j = 1; j <= floors; j++) {
                    buildingDivStr += "<div class='floors'>";
                    for (let z = 1; z <= rooms; z++) {
                        let roomNum = j + "0" + z;
                        let classStr = "rooms";
                        let clickStr = "";
                        for (let n = 0; n < exitHouseList.length; n++) {
                            if (unit === exitHouseList[n].buildingUnit*1 && roomNum === exitHouseList[n].house_number) {
                                classStr += " exit-room";
                                clickStr = " onclick='showRoomDetail(\"" + exitHouseList[n].id + "\",\"" + roomNum + "\")'";
                                break;
                            }
                        }
                        for (let m = 0; m < houseByBuildingRentList.length; m++) {
                            if (unit === houseByBuildingRentList[m].buildingUnit*1 && roomNum === houseByBuildingRentList[m].house_number) {
                                classStr += " rent-room";
                                if (!clickStr)
                                    clickStr = " onclick='showRoomDetail(\"" + exitHouseList[m].id + "\",\"" + roomNum + "\")'";
                                break;
                            }
                        }
                        for (let q = 0; q < focusPeopleCountByBuilding.length; q++) {
                            if (unit === focusPeopleCountByBuilding[q].buildingUnit*1 && roomNum === focusPeopleCountByBuilding[q].house_number) {
                                classStr += " focus-room";
                                if (!clickStr)
                                    clickStr = " onclick='showRoomDetail(\"" + exitHouseList[q].id + "\",\"" + roomNum + "\")'";
                                break;
                            }
                        }
                        buildingDivStr += "<div class='" + classStr + "' " + clickStr + ">";
                        buildingDivStr += roomNum;
                        buildingDivStr += "</div>";
                    }
                    buildingDivStr += "</div>";
                }
                buildingDivStr += "</div>";
            }
        }

        buildingDivStr += "</div></div>";
        $('.right-building').html(buildingDivStr);
      }
    },

    //房屋详情
    showRoomDetail(id,num) {
      console.log("roomdetail:")
      this.currentRoom = num
      this.houseId = id
      // this.componentKey += 1;
      this.houseDetailFlowBox = true
    },
  },
  beforeDestroy() {
    // if (this.view) {
    //   this.view.container = null
    // }

    this.houseId = ''
  },
}
</script>

<style lang="scss" scoped>

</style>
